<template>
  <div>
    <!-- 表单 -->
    <!-- 1.文本框——双向绑定 -->
    用户名：<input v-model="username" type="text" />
    <br />
    密 码：<input v-model="password" type="text" />
    <br />
    <!-- 2.下拉菜单 -->
    来自于：
    <select v-model="city">
      <option value="sh">上海</option>
      <option value="bj">北京</option>
      <option value="wh">武汉</option>
      <option value="cx">曹县</option>
    </select>
    <br />
    <!-- 3.多选框 -->
    爱好：
    <!-- 绑定数据为数组-获取的是value值 -->
    <!-- <input v-model="hobby" type="checkbox" value="eat" />吃饭
    <input v-model="hobby" type="checkbox" value="sleep" />睡觉
    <input v-model="hobby" type="checkbox" value="beat" />打豆豆 -->
    <!-- 绑定数据为字符串-获取是否选中的布尔值 -->
    <input v-model="isCheck1" type="checkbox" value="eat" />吃饭
    <input v-model="isCheck2" type="checkbox" value="sleep" />睡觉
    <input v-model="isCheck3" type="checkbox" value="beat" />打豆豆
    <br />
    <!-- 4.单选框 -->
    性别：
    <input v-model="gender" type="radio" name="gender" value="male" />男
    <input v-model="gender" type="radio" name="gender" value="female" />女
    <br />
    <!-- 5.文本域 -->
    自我介绍：
    <textarea v-model="introduce" name="" id="" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      city: "cx",
      hobby: [],
      isCheck1: "",
      isCheck2: "",
      isCheck3: "",
      gender: "",
      introduce: "",
    };
  },
};
</script>

<style lang="scss" scoped>
</style>